<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md">
      <q-card style="height: 87vh;">
        <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="justify"
          narrow-indicator>
          <q-tab name="rows_to_one" label="多行转一行" />
          <q-tab name="link_to_pic" label="(Excel)链接转图片" />
        </q-tabs>

        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <!-- 多行转一行 -->
          <q-tab-panel name="rows_to_one" >
            <RowsToOne/>
          </q-tab-panel>

          <!-- excel链接转图片 -->
          <q-tab-panel name="link_to_pic">
            <ExcelUrlToPic/>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>
<script setup>
import { useQuasar } from 'quasar'
import { onBeforeUnmount } from 'vue'
import { ref } from 'vue'
import RowsToOne from 'components/RowsToOne.vue'
import ExcelUrlToPic from 'src/components/ExcelUrlToPic.vue'

const $q = useQuasar()

const tab = ref('rows_to_one')

function doOnTabOpened(url) {
  console.log('New Browser Tab Openend: ', url)
}

// Add our listener
$q.bex.on('bex.tab.opened', doOnTabOpened)

// Don't forget to clean it up
onBeforeUnmount(() => {
  $q.bex.off('bex.tab.opened', doOnTabOpened)
})

const myButtonClickHandler = async () => {
  const { data } = await $q.bex.send('page_add_btn')
  console.log('===background-data', data)
  $q.notify(data)
}
</script>
